<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<template>
  <div class="help-page">
    <header class="help-header">
      <h1 class="topictitle1">Remote Virtual Console-{{ t('REMOTE_HELP_DOCUMENT') }}</h1>
    </header>
    <main class="help-main">
      <section class="help-section">
        <h4 class="sectiontitle">功能介绍</h4>
        <p>Remote Virtual Console客户端提供以下核心功能：</p>
        <ul>
          <li>
            <strong>多标签页管理</strong
            >：支持同时打开多个标签页，每个标签页可以连接到不同的服务器，方便您同时管理多台服务器。
          </li>
          <li>
            <strong>连接信息管理</strong
            >：您可以保存常用的服务器连接信息（包括IP地址、端口和自定义标签），下次使用时可以快速连接，无需重复输入。
          </li>
          <li>
            <strong>HTML5远程控制台</strong
            >：提供基于HTML5技术的远程控制台功能，支持独占模式和共享模式两种连接方式，满足不同场景的使用需求。
          </li>
          <li>
            <strong>中英文支持</strong>：支持中文和英文两种语言界面，您可以根据需要随时切换语言。
          </li>
          <li><strong>信任站点管理</strong>：支持管理信任的服务器站点列表，提升连接安全性。</li>
        </ul>
        <p>
          通过使用Remote Virtual
          Console客户端提供的功能，您可以远程连接到服务器实现对服务器的远程控制。您可以安装、修复操作系统、安装设备驱动程序等操作。
        </p>
        <ul>
          <li>您可以在本地PC上利用键盘和鼠标对远程的服务器进行远程实时操作。</li>
          <li>
            您可以通过网络使服务器以虚拟软驱或光驱的形式实现对本地PC的远程访问。从服务器一侧看，虚拟软驱或光驱与实际插入服务器的（USB，Universal
            Serial Bus）设备的使用方法相同。
          </li>
        </ul>
        <p>在HTML5远程控制台中，工具栏中的按钮说明如<strong>表1</strong>所示。</p>
      </section>

      <section class="help-section">
        <h4 class="sectiontitle">表1 按钮说明</h4>
        <div class="table-container">
          <table class="button-table">
            <thead>
              <tr>
                <th width="25%">按钮</th>
                <th width="75%">说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <img src="../assets/common/image/help/001.png" alt="" />
                </td>
                <td>
                  <p>浮动按钮。表示当前工具栏被固定。</p>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/002.png" alt="" />
                </td>
                <td>
                  <p>浮动按钮。表示当前工具栏被隐藏。</p>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/003.png" alt="" />
                </td>
                <td>
                  <p>“全屏”按钮。表示全屏显示服务器的实时桌面。</p>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/004.png" alt="" />
                </td>
                <td>
                  <p>“退出全屏”按钮。表示取消全屏显示服务器的实时桌面。</p>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/005.png" alt="" />
                </td>
                <td>
                  <p>“控制”按钮。表示控制服务器电源。操作包括：</p>
                  <ul>
                    <li>上电</li>
                    <li>强制下电</li>
                    <li>下电</li>
                    <li>强制重启</li>
                    <li>强制下电后上电</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/006.png" alt="" />
                </td>
                <td>
                  <p>“系统启动项”按钮。表示设置操作系统的第一启动设备。操作包括：</p>
                  <ul>
                    <li>未配置：表示不设置第一启动设备，按BIOS中设置的默认方式启动操作系统。</li>
                    <li>硬盘：表示强制从硬盘启动系统。</li>
                    <li>光驱：表示强制从CD/DVD启动系统。</li>
                    <li>软驱/可拔插移动设备：表示强制从软驱或可拔插移动设备启动系统。</li>
                    <li>
                      PXE：表示强制从预启动执行环境（PXE，Pre-boot Execution Environment）启动系统。
                    </li>
                    <li>BIOS设置：表示服务器启动后直接进入BIOS菜单中。</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/007.png" alt="" />
                </td>
                <td>
                  <p>
                    “键盘组合键”按钮。表示发送或自定义特殊组合键。该窗口中的组合键及其含义包括：
                  </p>
                  <ul>
                    <li>Alt+Tab：在打开的项目中进行切换。</li>
                    <li>Ctrl+Esc：显示或收起“开始”菜单。</li>
                    <li>Ctrl+Shift：切换输入法。</li>
                    <li>Ctrl+Space：开启或关闭输入法。</li>
                    <li>
                      Ctrl+Alt+Del：锁定操作系统界面、注销用户、更改密码和打开任务管理器、重新启动服务器等。
                    </li>
                    <li>
                      自定义按键：如果您需要自定义组合键，请在“自定义按键”后的文本框中依次输入按键，或单击界面的特殊字符代替键盘输入，然后单击“确定”。或者单击“保存”，保存到常用按键，再单击常用按键中的自定义按键。
                    </li>
                  </ul>
                  <div class="note">
                    <span class="notetitle">说明：</span>
                    <div class="notebody">
                      <ul>
                        <li>
                          在不同的操作系统中，操作系统各自定义的组合键及其含义不同。该窗口中的组合键及其含义仅适用于Windows操作系统。
                        </li>
                        <li>
                          最多保存10种自定义按键作为常用按键。若已经存在10种自定义按键，只能先删除一种存在的按键，再输入新的组合键才能保存成功。
                        </li>
                        <li>相同的自定义按键不能保存。</li>
                      </ul>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/008.png" alt="" />
                </td>
                <td>
                  <p>“鼠标控制”按钮。表示控制服务器鼠标。操作包括：</p>
                  <ul>
                    <li>
                      <strong>鼠标加速</strong>
                      <p>加速服务器实时桌面上的鼠标，使其与本地PC上的鼠标同步。</p>
                      <div class="note">
                        <span class="notetitle">说明：</span>
                        <div class="notebody">
                          <p>低于SUSE 12版本的SUSE操作系统不支持鼠标加速功能。</p>
                        </div>
                      </div>
                    </li>
                    <li>
                      <strong>单鼠标</strong>
                      <p>隐藏本地PC上的鼠标，只显示服务器实时桌面上的鼠标。</p>
                    </li>
                    <li>
                      <strong>键鼠复位</strong>
                      <p>
                        模拟插拔USB键盘和USB鼠标，服务器实时桌面上的键盘鼠标出现异常停滞时单击此按钮可以恢复。
                      </p>
                    </li>
                  </ul>
                  <p>默认的操作：鼠标加速</p>
                  <div class="note">
                    <span class="notetitle">说明：</span>
                    <div class="notebody">
                      <ul>
                        <li>
                          <span
                            >鼠标加速和单鼠标均未勾选时，服务器实时桌面鼠标和本地PC鼠标同时显示，且服务器实时桌面鼠标不跟随本地PC鼠标。</span
                          >
                        </li>
                        <li>
                          <span
                            >BMA驱动盘连接状态下，执行鼠标控制操作会中断此连接。请先断开BMA驱动盘连接，再执行鼠标控制操作。</span
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/009.png" alt="" />
                </td>
                <td>
                  <p>“CD/DVD”按钮。表示选择并使用虚拟光驱。</p>
                  <div class="note">
                    <span class="notetitle">说明：</span>
                    <div class="notebody">
                      <p>
                        虚拟光驱和虚拟软驱属于复合设备，当连接虚拟光驱时，服务器会同时识别到一个无介质的虚拟软驱设备。按照正常操作方式可继续使用虚拟软驱功能。
                      </p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/010.png" alt="" />
                </td>
                <td>
                  <p>“录像”按钮。表示对远程实时操作进行录像。</p>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/011.png" alt="" />
                </td>
                <td>
                  <p>
                    “键盘布局”按钮。表示客户端的键盘类型。默认情况下，BMC自动适配客户端的键盘类型。当自适应模式下键盘适配情况不理想时，请强制指定目标键盘类型。
                  </p>
                  <ul>
                    <li>“美式键盘”：强制指定键盘类型为美式键盘。</li>
                    <li>“日式键盘”：强制指定键盘类型为日式键盘。</li>
                    <li>“法式键盘”：强制指定键盘类型为法式键盘。</li>
                    <li>“意式键盘”：强制指定键盘类型为意式键盘。</li>
                    <li>“德式键盘”：强制指定键盘类型为德式键盘。</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/012.png" alt="" />
                </td>
                <td>
                  <p>“软键盘”按钮。表示选择并使用客户端的软键盘。</p>
                  <div class="note">
                    <span class="notetitle">说明：</span>
                    <div class="notebody">
                      <ul>
                        <li>软键盘支持魔术组合键。</li>
                        <li>仅美式键盘支持软键盘功能。</li>
                      </ul>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="../assets/common/image/help/013.png" alt="" />
                </td>
                <td>
                  <p>“图像清晰度”游标图标。表示调节远程实时图像的清晰度。</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="help-section">
        <h4 class="sectiontitle">界面描述</h4>
        <p>Remote Virtual Console客户端支持同时管理多个服务器连接。主界面主要分为三个区域：</p>
        <ul>
          <li>
            <strong>顶部导航栏</strong>：显示信任站点管理、语言切换（中文/英文）和帮助文档入口。
          </li>
          <li>
            <strong>左侧连接管理区</strong
            >：显示"已保存的连接"列表，您可以点击任意一条保存的连接快速在新标签页中建立连接。每个连接显示自定义标签、IP地址和端口信息，支持编辑和删除操作。
          </li>
          <li>
            <strong>右侧标签页区域</strong
            >：支持创建多个标签页，每个标签页可以独立连接到不同的服务器。点击左侧保存的连接或创建新标签页后，会在标签页中打开登录页面，输入服务器IP、端口和认证信息后即可建立连接。
          </li>
        </ul>
        <p>
          连接建立成功后，系统会自动跳转到HTML5远程控制台页面。关闭标签页时，系统会提示您是否将当前连接信息保存。
        </p>
        <h5 class="subsection-title">可信站点管理</h5>
        <p>
          可信站点管理功能用于提升连接安全性，帮助您管理信任的服务器站点列表。当您首次连接到某个服务器时，如果该服务器的IP地址不在可信列表中，系统会弹出安全提示对话框，询问您是否信任该站点。
        </p>
        <p>可信站点管理的主要功能包括：</p>
        <ul>
          <li>
            <strong>添加可信站点</strong
            >：您可以点击顶部导航栏的"信任站点列表"按钮，打开可信站点管理窗口，手动添加服务器的IP地址到可信列表。也可以在首次连接服务器时，通过安全提示对话框选择"信任并继续"来自动添加。
          </li>
          <li>
            <strong>查看可信站点列表</strong
            >：在可信站点管理窗口中，您可以查看所有已保存的可信站点，每个站点显示IP地址信息。
          </li>
          <li>
            <strong>编辑可信站点</strong
            >：对于已保存的可信站点，您可以修改其IP地址。点击列表中的"编辑"按钮，在弹出的对话框中输入新的IP地址并保存即可。
          </li>
          <li>
            <strong>删除可信站点</strong
            >：如果某个服务器不再需要信任，您可以点击列表中的"删除"按钮将其从可信列表中移除。
          </li>
        </ul>
        <div class="note">
          <span class="notetitle">说明：</span>
          <div class="notebody">
            <ul>
              <li>可信站点列表保存在本地文件中，关闭应用后仍会保留。</li>
              <li>建议仅将您信任的服务器添加到可信列表中，以确保连接安全。</li>
            </ul>
          </div>
        </div>
      </section>

      <section class="help-section">
        <h4 class="sectiontitle">操作说明</h4>
        <p><strong>为服务器上电</strong></p>
        <ol>
          <li>
            <span
              >在工具栏中，单击<img
                src="../assets/common/image/help/005.png"
                alt=""
              />，在快捷菜单中选择“上电”。</span
            >
          </li>
          <li>
            <span>单击“确定”。</span>
            <p>服务器开始上电。</p>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <p>服务器上电的时间根据服务器配置所不同。</p>
              </div>
            </div>
          </li>
        </ol>
        <p><strong>为服务器下电</strong></p>
        <div class="notice">
          <span class="noticetitle">须知：</span>
          <div class="noticebody">
            <ul>
              <li>请在下电前确认无中断当前业务风险。</li>
              <li>
                请根据实际情况选择下电方式，“强制下电”和“下电”的区别请参考BMC用户指南的“系统管理 >
                电源&功率”章节。
              </li>
            </ul>
          </div>
        </div>
        <ol>
          <li>
            <span
              >在工具栏中，单击<img
                src="../assets/common/image/help/005.png"
                alt=""
              />，在快捷菜单中选择“强制下电”或“下电”。</span
            >
          </li>
          <li>
            <span>单击“确定”。</span>
            <p>服务器开始下电。</p>
          </li>
        </ol>
        <p><strong>强制重启或强制下电后上电</strong></p>
        <div class="notice">
          <span class="noticetitle">须知：</span>
          <div class="noticebody">
            <ul>
              <li>
                强制重启或强制下电再上电可能会损坏用户的程序或者未保存的数据，请根据操作系统实际情况谨慎选择操作方式。
              </li>
              <li>请在强制重启或强制下电再上电前确认无中断当前业务风险。</li>
              <li>
                请根据实际情况选择“强制重启”或“强制下电再上电”，“强制重启”和“强制下电再上电”的区别请参考BMC用户指南的“系统管理
                > 电源&功率”章节。
              </li>
            </ul>
          </div>
        </div>
        <ol>
          <li>
            <span
              >在工具栏中，单击<img
                src="../assets/common/image/help/005.png"
                alt=""
              />，在快捷菜单中选择“强制重启”或“强制下电再上电”。</span
            >
          </li>
          <li>
            <span>单击“确定”。</span>
            <p>服务器开始强制重启或强制下电再上电。</p>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <p>服务器强制重启或强制下电再上电的时间根据服务器配置所不同。</p>
              </div>
            </div>
          </li>
        </ol>
        <p><strong>设置操作系统的第一启动设备</strong></p>
        <ol>
          <li>
            <span>在工具栏中，单击<img src="../assets/common/image/help/006.png" alt="" />。</span>
            <p>弹出启动设备列表。</p>
          </li>
          <li>
            <span>根据<strong>表1</strong>提供的参数信息，单击需要设置的启动设备。</span>
            <p>成功设置服务器操作系统的第一启动设备。</p>
          </li>
        </ol>
        <p><strong>发送特殊组合键</strong></p>
        <ol>
          <li>
            <span>在工具栏中，单击<img src="../assets/common/image/help/007.png" alt="" />。</span>
            <p>弹出组合键菜单。</p>
          </li>
          <li>
            <span>参考<strong>表1</strong>提供的信息，选择您需要发送的组合键。</span>
            <p>服务器将执行组合键对应的操作。</p>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <p>
                  如果您需要自定义组合键，请在“自定义按键”后的文本框中依次输入按键，然后单击“确定”。
                </p>
              </div>
            </div>
          </li>
        </ol>
        <p><strong>加速远程鼠标</strong></p>
        <p>本操作对实时桌面上的鼠标进行加速，使其与本地PC上的鼠标同步。</p>
        <p>
          在工具栏中，单击<img
            src="../assets/common/image/help/008.png"
            alt=""
          />，在快捷菜单中选择“鼠标加速”。
        </p>
        <p>同步本地PC与服务器的鼠标。</p>
        <p><strong>使用单鼠标</strong></p>
        <p>
          <span
            >如果本地PC上的鼠标与实时桌面上的不同步，您可以使用单鼠标功能隐藏本地PC上的鼠标。“KVM”界面中只保留实时桌面上的鼠标。</span
          >
        </p>
        <p>
          在工具栏中，单击<img
            src="../assets/common/image/help/008.png"
            alt=""
          />，在快捷菜单中选择“单鼠标”。
        </p>
        <p>“KVM”界面中只显示实时桌面上的鼠标。</p>
        <p><strong>键鼠复位</strong></p>
        <p>
          <span>本操作模拟插拔USB键盘和USB鼠标。</span>
        </p>
        <p>
          在工具栏中，单击<img
            src="../assets/common/image/help/008.png"
            alt=""
          />，在快捷菜单中选择“键鼠复位”。
        </p>
        <p>服务器开始执行USB复位操作。</p>
        <p><strong>指定客户端的键盘类型</strong></p>
        <p>在工具栏中，单击<img src="../assets/common/image/help/011.png" alt="" />。</p>
        <p>从下拉列表中选择目标键盘类型，则成功强制指定键盘类型。</p>
        <p><strong>通过虚拟光驱挂载镜像文件</strong></p>
        <p>
          本操作使用本地PC上的光盘镜像文件虚拟出另一个光驱提供给服务器，并将光盘镜像文件加载到该虚拟光驱中。
        </p>
        <ol>
          <li>
            <span>在工具栏中，单击<img src="../assets/common/image/help/009.png" alt="" />。</span>
          </li>
          <li>
            <span>选中“镜像文件”单选按钮。</span>
          </li>
        </ol>
        <ol start="3">
          <li>
            <span>单击<img src="../assets/common/image/help/014.png" alt="" />。</span>
            <p>打开本地文件夹选择窗口。</p>
          </li>
          <li>
            <span>选择本地PC上存放的“*.iso”格式镜像文件，单击“连接”。</span>
            <p>服务器上成功挂载镜像文件。</p>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <ul>
                  <li>
                    挂载镜像文件成功后，单击“弹出”，弹出光盘镜像文件；弹出光盘镜像文件后，可重新选择其他“*.iso”格式的镜像文件，然后单击“插入”，挂载该镜像文件。
                  </li>
                  <li>挂载镜像文件成功后，单击“断开”，卸载服务器上的虚拟光驱。</li>
                  <li>如果在进grub前连接了光驱，请不要在grub界面操作断开光驱。</li>
                </ul>
              </div>
            </div>
          </li>
        </ol>
        <p><strong>挂载本地文件</strong></p>
        <p>本操作将本地PC上的文件挂载到服务器，使服务器系统可以以只读方式访问本地文件。</p>
        <ol>
          <li>
            <span>在工具栏中，单击<img src="../assets/common/image/help/009.png" alt="" />。</span>
          </li>
        </ol>
        <ol start="2">
          <li>
            <span>选中“本地文件”单选按钮。</span>
          </li>
          <li>
            <span>单击<img src="../assets/common/image/help/014.png" alt="" />。</span>
            <p>打开本地文件选择窗口。</p>
          </li>
          <li>
            <span>选择要挂载的本地文件。</span>
          </li>
          <li>
            <span>单击“连接”。</span>
            <p>服务器上成功挂载本地文件。</p>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <ul>
                  <li>连接成功后，在服务器操作系统中，可以看到虚拟文件。</li>
                  <li>连接成功后，单击“断开”，可以卸载虚拟文件。</li>
                  <li>如果在进grub前连接了光驱，请不要在grub界面操作断开光驱。</li>
                </ul>
              </div>
            </div>
          </li>
        </ol>
        <p><strong>挂载本地文件夹</strong></p>
        <p>本操作将本地PC上的文件夹挂载到服务器，使服务器系统可以以只读方式访问本地文件夹。</p>
        <ol>
          <li>
            <span>在工具栏中，单击<img src="../assets/common/image/help/009.png" alt="" />。</span>
          </li>
        </ol>
        <ol start="2">
          <li>
            <span>选中“本地文件夹”单选按钮。</span>
          </li>
          <li>
            <span>单击<img src="../assets/common/image/help/014.png" alt="" />。</span>
            <p>打开本地文件夹选择窗口。</p>
          </li>
          <li>
            <span>选择要挂载的本地文件夹。</span>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <ul>
                  <li>本地文件夹不能为空。</li>
                  <li>
                    上传文件需要注意不同操作系统的最长路径限制，例如：Linux的路径长度限制为4096字节，文件名长度限制为255字节，默认情况下，Windows使用256个字符的路径长度限制(MAX_PATH):命名文件、路径和名称空间。
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <span>单击“连接”。</span>
            <p>服务器上成功挂载本地文件夹。</p>
            <div class="note">
              <span class="notetitle">说明：</span>
              <div class="notebody">
                <ul>
                  <li>连接成功后，在服务器操作系统中，可以看到虚拟文件夹。</li>
                  <li>连接成功后，单击“断开”，可以卸载虚拟文件夹。</li>
                  <li>如果在进grub前连接了光驱，请不要在grub界面操作断开光驱。</li>
                </ul>
              </div>
            </div>
          </li>
        </ol>
        <p><strong>为实时桌面录像</strong></p>
        <p>本操作对当前远程虚拟控制台显示的画面进行录像。</p>
        <p>录制的录像文件格式为“*.rep”。</p>
        <ol>
          <li>
            <span
              >在工具栏中，单击<img
                src="../assets/common/image/help/010.png"
                alt=""
              />，按钮状态切换为<img
                src="../assets/common/image/help/015.png"
                alt=""
              />时，开始对实时桌面进行录像。</span
            >
          </li>
          <li>
            <span>录制完成后，单击<img src="../assets/common/image/help/015.png" alt="" />。</span>
            <p>录像文件将自动被下载并保存到本地PC。</p>
            <p>录制的录像文件格式为“*.rep”。</p>
          </li>
        </ol>
      </section>
    </main>
  </div>
</template>

<style scoped lang="scss">
.help-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.help-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #ffffff;

  .topictitle1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #303133;
  }
}

.help-main {
  flex: 1;
  padding: 16px 24px 24px;
  overflow-y: auto;
}

.help-section {
  margin-bottom: 24px;

  .sectiontitle {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  h5 {
    margin: 16px 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
  }

  p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #606266;
  }

  ul {
    margin: 8px 0;
    padding-left: 24px;

    li {
      list-style: disc;
      margin: 4px 0;
      font-size: 14px;
      line-height: 1.7;
      color: #606266;

      p {
        margin: 4px 0;
      }
    }
  }

  ol {
    margin: 8px 0;
    padding-left: 24px;

    li {
      margin: 4px 0;
      font-size: 14px;
      line-height: 1.7;
      color: #606266;

      p {
        margin: 4px 0;
      }
    }
  }

  strong {
    font-weight: 600;
    color: #303133;
  }

  em {
    font-style: italic;
  }

  code {
    background-color: #f5f7fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #e6a23c;
  }
}

.table-container {
  margin: 16px 0;
  overflow-x: auto;
}

.button-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  font-size: 14px;

  thead {
    background-color: #f5f7fa;

    th {
      padding: 12px;
      text-align: left;
      font-weight: 600;
      color: #303133;
      border: 1px solid #dcdfe6;
    }
  }

  tbody {
    tr {
      &:nth-child(even) {
        background-color: #fafafa;
      }

      td {
        padding: 12px;
        border: 1px solid #dcdfe6;
        color: #606266;
        vertical-align: top;

        p {
          margin: 4px 0;
        }

        ul {
          margin: 8px 0;
          padding-left: 20px;
        }
      }
    }
  }
}

.button-icon {
  display: inline-block;
  padding: 4px 8px;
  background-color: #ecf5ff;
  border: 1px solid #b3d8ff;
  border-radius: 3px;
  font-size: 13px;
  color: #409eff;
  font-weight: 500;
}

.note {
  margin: 12px 0;
  padding: 12px;
  background-color: #f0f9ff;
  border-left: 4px solid #409eff;
  border-radius: 4px;

  .notetitle {
    display: block;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
  }

  .notebody {
    p {
      margin: 4px 0;
    }

    ul {
      margin: 8px 0;
      padding-left: 20px;
    }
  }
}

.notice {
  margin: 12px 0;
  padding: 12px;
  background-color: #fef0f0;
  border-left: 4px solid #f56c6c;
  border-radius: 4px;

  .noticetitle {
    display: block;
    font-weight: 600;
    color: #f56c6c;
    margin-bottom: 8px;
  }

  .noticebody {
    ul {
      margin: 8px 0;
      padding-left: 20px;
    }
  }
}

.menucascade {
  .uicontrol {
    font-weight: 500;
    color: #409eff;
  }
}
</style>
